<template>
  <div>
    <p class="p1">用户评论</p>
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <van-field
            v-model="message"
            rows="2"
            autosize
            label="留言"
            type="textarea"
            maxlength="50"
            placeholder="请输入留言"
            show-word-limit
            class="textarea_bgc"
          />
          <mt-button type="primary" size="large" @click="adduser"
            >提交</mt-button
          >
        </div>
      </div>
    </div>
    <!-- 评论列表 -->
    <ul class="mui-table-view">
      <li
        class="mui-table-view-cell li_bgc "
        v-for="(item, i) in comment_list"
        :key="item.id"
      >
        第 {{ i + 1 }} 楼：{{ item.id }} &nbsp; &nbsp;
        {{ item.authName }} &nbsp; &nbsp; 发表时间 &nbsp; &nbsp;
        {{ item.roleDesc }}
      </li>
    </ul>
  </div>
</template>

<script>
import Vue from 'vue'
import { Toast } from 'vant'
Vue.use(Toast)
export default {
  data() {
    return {
      message: '',
      comment_list: []
    }
  },
  created() {
    this.getlist()
  },
  methods: {
    // 添加用户
    async adduser() {
      const { data: res } = await this.$http.post('roles', {
        roleName: this.id,
        roleDesc: this.message
      })
      // console.log(res)
      if (res.meta.status !== 201) {
        return Toast('添加评论失败')
      }
      this.getlist()
      Toast('添加评论成功')
    },
    // 获取所有的角色
    async getlist() {
      const { data: res } = await this.$http.get('roles')
      if (res.meta.status !== 200) {
        return Toast('获取评论失败')
      }
      // 获取成功
      this.comment_list = res.data
      console.log(this.comment_list)
    }
  },
  props: ['id']
}
</script>

<style lang="less" socped>
.p1 {
  background-color: skyblue;
  text-align: center;
  height: 40px;
  line-height: 40px;
  color: black;
}
.textarea_bgc {
  // background-color: #007acc;
  color: #fff !important;
}
.li_bgc {
  background-color: #cccccc;
  margin: 0 2px;
}
</style>
